<script setup>
	import { onMounted, ref } from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
		onShareAppMessage,
	} from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	const detailsList = ref([])
	const currentPage = ref(1)
	async function getDetails() {
		const res = await http.request({
			url: '/api/shop/balanceShopLog',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
			},
		})
		console.log(res)
		detailsList.value = [...detailsList.value, ...res.data]
	}

	// 上拉加载
	onReachBottom(() => {
		currentPage.value++
		getDetails()
	})

	onLoad(() => {
		getDetails()
	})
</script>

<template>
	<view class="income-content">
		<view class="content-bg">
			<view
				class="income-list"
				v-for="(item, index) in detailsList"
				:key="item.id"
			>
				<view
					class="income-money"
					style="display: flex; justify-content: space-between"
				>
					<view class="income-item" style="color: #383838">
						<text class="">订单</text>
						<text
							class=""
							style="margin-left: 15rpx; font-size: 22rpx"
							>{{ item.order_money }}</text
						>
					</view>
					<view class="income-item" style="color: #ff6b26">
						<text class="">平台成本</text>
						<text
							class=""
							style="margin-left: 15rpx; font-size: 22rpx"
							>{{ item.y_money }}</text
						>
					</view>
					<view class="income-item" style="color: #7948ea">
						<text class="">收入</text>
						<text
							class=""
							style="margin-left: 15rpx; font-size: 22rpx"
							>{{ item.money }}</text
						>
					</view>
				</view>
				<view class="">
					<view class="order-num">
						<text class="">订单号：{{ item.order_sn }}</text>
					</view>
					<view class="order-time">
						<text class=""
							>订单完成时间：{{ parseTime(item.add_time) }}</text
						>
						<text class="">{{ item.box_name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.income-content {
	}
	.content-bg {
		// width: 730rpx;
		min-height: 100vh;
		padding: 0 30rpx;
		padding-bottom: 40rpx;
		background-color: #f2edfa;
		// margin: 20rpx auto;
		border-radius: 14rpx;
		display: flex;
		// justify-content: center;
		flex-direction: column;
	}

	.income-list {
		width: 100%;
		height: 184rpx;
		padding: 16rpx 0;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 14rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	.income-money,
	.order-num,
	.order-time {
		display: flex;
		justify-content: space-between;
		width: 85vw;
		margin: 10rpx auto;
		font-size: 36rpx;
	}
	.income-money {
		.income-item {
			display: flex;
			align-items: flex-end;
			width: 33%;
			font-size: 24rpx;
		}
	}
	.order-num,
	.order-time {
		font-size: 20rpx;
		color: #a6a6a6;
	}
</style>
